<template>
	<view>
		<view class="singerbox">
			<image class="background" :src="singer.picUrl" mode="widthFix" />
			<view class="bg"></view>
			<view class="content">
				<view class="outerbox">
					<view class="imgbox">
						<image :src="singer.picUrl" mode="widthFix"></image>
					</view>
				</view>
				<view class="name">
					{{singer.name}}
				</view>
			</view>
		</view>
		<view class="songList_wrap">
			<view class="songList_wrap_title">
				<view id="play" @click="playAll" class="iconfont icon-bofang" style="font-size: 50upx; color: #333333;"></view>
				<view class="paly2" data-index="0">
					播放全部
					<text class="songCount">(共{{ songList.length }}首)</text>
				</view>
				<view class="play3_border"><view class="paly3">热门单曲</view></view>
			</view>
			<view class="songArray_wrap" v-for="(item, index) in songList" :key="index">
				<view class="songArray_inex">{{ index + 1 }}</view>
				<view class="songArray_content" @click="playMusic(item.id)">
					<view class="content_1">{{ item.name }}</view>
				</view>
				<!-- MV图标处理 -->
				<view class="songArray_mv">
					<view v-if="item.mv !== 0"><view id="songArray_mv" class="iconfont icon-Youtube" @click="playMv(item.mv)"></view></view>
					<view v-else><view id="songArray_mv" class="iconfont icon-Youtube" style="color: white;"></view></view>
				</view>
				<view id="songArray_other" class="iconfont icon-caidan2" style="color: #cccccc;"></view>
			</view>
		</view>
		<mytarbar class="mytarbar"></mytarbar>
	</view>
</template>

<script>
import { singerRequest } from '../../api/singer.js';
import MyTarBar from '../../components/mytarbar/mytarbar.vue';
export default {
	data() {
		return {
			songList: [],
			singerInfo: {},
			backgroundUrl:"",
			picUrl:"",
			singer:{},
			allMusic:[],
		};
	},
	comments: {
		MyTarBar
	},
	onLoad(option) {
		this.picUrl=option.picUrl
		let that = this
		// 使用这种方式无法修改data里的数据，原因未知
		// uni.$on("getsinger",(singer)=>{
		// 	that.singer=singer
		// 	console.log("62",that.singer)
		// })
		
		this.singer = uni.getStorageSync("singer")
		
		
		this.getSong(option.id);
	},
	methods: {
		// async getSinger(id){
		// 	let result = await singerRequest({
		// 		url:"/artist/desc",
		// 		data:{
		// 			id
		// 		}
		// 	})
		// 	console.log(result);
		// 	this.singerInfo=result[1].data;
		// 	// this.singerInfo.picUrl=result[1].data.topicData[0].rectanglePicUrl
		// },
		async getSong(id) {
			let result = await singerRequest({
				url: '/artist/top/song',
				data: {
					id
				}
			});
			this.songList = result[1].data.songs;
			this.allMusic=this.songList.map(item=>{
				return {
					name:item.name,
					id:item.id,
					author:item.ar[0].name
				}
			})
			// this.backgroundUrl= this.songList[0].al.picUrl
		},
		playMusic(id) {
			this.$store.dispatch('getSong', id);
		},
		playAll(){
			this.$store.commit("addList",this.allMusic)
		}
	}
};
</script>

<style lang="scss" scoped>
.singerbox {
	height: 360upx;
	position: relative;
}
.background {
	width: 100%;
	z-index: 0;
	position: absolute;
	filter: blur(10upx);
}
.bg {
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 1;
}
.content{
	position: absolute;
	top: 0upx;
	left: 0upx;
	right: 0upx;
	bottom: 0upx;
	z-index: 2;
	color: white;
	.outerbox{
		display: flex;
		justify-content: center;
		align-items: center;
		.imgbox{
			margin-top: 40upx;
			width: 200upx;
			height: 200upx;
			border-radius: 50%;
			overflow: hidden;
			border: 4upx solid white;
			position: relative;
			image{
				width: 300upx;
				position: absolute;
				left: 50%;
				transform: translate(-50%);
			}
		}
	}
	.name{
		margin-top: 20upx;
		text-align: center;
	}
}
/* 列表 */
.songList_wrap {
	position: absolute;
	top:360upx;
	left: 0upx;
	right: 0upx;
	overflow: hidden;
	background-color: white;
	/* height: 100%; */
	padding-bottom: 150upx;
}

.songList_wrap_title {
	padding: 40upx 0;
	display: flex;
	justify-content: space-between;
	justify-items: center;
}

.songList_wrap_title {
	font-size: 38upx;
	color: #333;
	border-top: 4upx solid #dfdfdf;
	border-bottom: 4upx solid #dfdfdf;
}

#play {
	padding-left: 40upx;
}

.paly2 {
	margin-right: 50upx;
}

.songCount {
	font-size: 30upx;
	color: #ccc;
}

.play3_border {
	margin-right: 20upx;
	width: 220upx;
	height: 80upx;
	background-color: red;
	border-radius: 40upx;
	margin-top: -12upx;
	text-align: center;
}

.paly3 {
	color: white;
	font-size: 30upx;
	line-height: 80upx;
}

/* 歌曲内容 */

.songArray_wrap {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 20upx 0;
}

.songArray_inex {
	padding-left: 40upx;
	color: #ccc;
	line-height: 70upx;
	width: 10%;
}

.songArray_content {
	width: 65%;
}

.content_1 {
	font-size: 35upx;
	/* 超过省略号 */
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	height: 100%;
	line-height: 70upx;
}

.songArray_content .content_2 {
	font-size: 35upx;
	color: #ccc;
}

.songArray_content .content_3 {
	font-size: 25upx;
	color: #ccc;
	margin-top: 10upx;
	/* 超过省略号 */
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
}

.songArray_mv {
	width: 10%;
}

#songArray_mv {
	width: 10%;
	line-height: 70upx;
}

#songArray_other {
	/* color: #CCCCCC; */
	width: 10%;
	line-height: 70upx;
}
.mytarbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 11;
}
</style>
